

<script>
import DarkState from '@/components/DarkState.vue'
import getImageUrl from '@/utils/getImageUrl.js'

export default {
    name: 'HomeHeader',
    props: {
        headerMenus: Array
    },
    components: {
        DarkState
    },
    data() {
        return {
            toIndexImageUrl: "/img/github.png",
            getImageUrl: getImageUrl
        }
    },
}
</script>

<template>
    <div id="home-header">
        <el-menu mode="horizontal" :ellipsis="false" router>
            <!-- logo -->
            <div class='logo-title' @click="$router.push({ path: '/' })">
                <el-image style="height: 55px;flex-shrink: 1;" :src="getImageUrl(toIndexImageUrl)" alt="logo" />
            </div>

            <!-- flex = 1 -->
            <div class="flex-grow" />

            <!-- 根据HeaderMenu来配置 -->
            <el-menu-item v-for="item in headerMenus" :key="item.path" :index="item.path">
                {{ item.name }}
            </el-menu-item>

            <div class="dark-state">
                <DarkState />
            </div>

        </el-menu>
    </div>
</template>


<style scoped lang="scss">
.flex-grow {
    flex-grow: 1;
}

.dark-state {
    padding-top: 10px;
}
</style>